<template>

  <div>
    <div v-if="$store.getters.isBubble===true">
      <bubbles ></bubbles>
    </div>
    <el-container>
      <el-header>
        <nav_header>
        </nav_header>
      </el-header>
      <el-main >


        <div id="indexApp_1" @click="changeSome">
          <transition name="fade-transform" mode="out-in">
            <keep-alive exclude='buttom' >
              <router-view>
              </router-view>
            </keep-alive>
          </transition>
          <el-row style="text-align:center;padding-bottom: 0px;padding-top: 30px;" >
<!--            <slot name="bottom"></slot>-->
            <bottom></bottom>
            <!--      插槽是先渲染插槽里面的组件再渲染当前页面的组件的-->
          </el-row>
        </div>



      </el-main>
      <el-footer>

        <cop-tips
            :toolShowsList="toolShowsList"
        />



      </el-footer>


    </el-container>

<!--    <el-backtop target="#indexApp_1" :bottom="100"visibility-height="10">-->
<!--    </el-backtop>-->
  </div>


</template>



<script>
import bubbles from '../bubble/index'
import nav_header from "../nav/index"
import bottom from "../bottom/index"
import copTips from "@/components/live2d/copTips";
import Vue from "vue";


export default {
  name: "index",

  components: {
    bottom,
    bubbles,
    nav_header,
    copTips
  },
  data() {
    return {
      isBubble: this.$store.getters.isBubble,
      bottom:"bottom1",
      toolShowsList: [
        '八嘎八嘎',
        'test',
        '看什么看',
        '人嘛了'
      ],
    }
  },
  /*要注意computed与watch的区别，例如下面的获取计算isBubble的过程，如果使用computed，就算store里面的isBubble的值发生改变了，
也不会执行computed里面的任何方法，
也就是说本页data里面的isBubble与store里面的isBubble不会发生任何关联，
即使你在data函数里面将store里面的isBubble值赋给isBubble，因为这么做只是取得他的一个副本
这时候watch的作用就来了，如果监听的某一个值（监听的是本页面的data里面的值）发生改变，将会执行某一个函数
*/
  computed: {
    // is_Bubble()
    // {
    //   return this.$store.getters.isBubble;
    // }

  },
  methods: {

    // test()
    // {
    //   this.$axios.get()
    // },
    changeSome()
    {
      const  emiter = new Vue()
      emiter.$bus.$emit("changeSome",false)
    }
  },
  mounted() {
    // let data={
    //   a:"a",
    //   b:md5("dasdasdds")
    // }
    //
    // console.log();

  }
}
</script>

<style >
@import "./css/random_pw.css";

</style>
